<template>
  <div>
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-form-item label="时间范围">
          <el-date-picker

            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="code">
          <el-button-group>
            <el-button @click="click1()">昨天</el-button>
            <el-button @click="click2()">近7天</el-button>
            <el-button @click="click3()">近30天</el-button>
          </el-button-group>
        </el-form-item>

        <el-row>
          <el-form-item prop="channel" label="渠道" style="margin-left:30px">
            <el-select v-model="filters.channel" placeholder="渠道" style="width:215px">
              <el-option label="全部" value="0"></el-option>
              <el-option label="BBC" value="1"></el-option>
              <el-option label="天猫" value="2"></el-option>
              <el-option label="京东" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="merchant" label="商家">
            <el-select v-model="filters.merchant" placeholder="商家" style="width:215px">
              <el-option label="全部" value="0"></el-option>
              <el-option label="录屏商家02" value="1"></el-option>
              <el-option label="录屏商家01" value="2"></el-option>
              <el-option label="测试商家" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="store" label="店铺">
            <el-select v-model="filters.store" placeholder="店铺" style="width:215px">
              <el-option label="全部" value="0"></el-option>
              <el-option label="京东店" value="1"></el-option>
              <el-option label="育学园天猫旗舰店" value="2"></el-option>
              <el-option label="录屏店铺" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="terminal" label="终端">
            <el-select v-model="filters.terminal" placeholder="终端" style="width:215px">
              <el-option label="全部" value="0"></el-option>
              <el-option label="PC" value="1"></el-option>
              <el-option label="IOS" value="2"></el-option>
              <el-option label="Android" value="3"></el-option>
              <el-option label="H5" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="find()"
            />
          </el-form-item>
        </el-row>

      </el-form>
    </div>

    <div class="block-container">
      <div class="block-content">
        <div class="block-item-3" id="chart1" :class="[isActive?'change':'changs']" @mouseleave="changeIt()" @mouseenter="changeIt()"></div>
        <div class="block-item-3" id="chart2" :class="[isActive2?'change':'changs']" @mouseleave="changeIt2()" @mouseenter="changeIt2()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-4" id="chart3" :class="[isActive3?'change':'changs']" @mouseleave="changeIt3()" @mouseenter="changeIt3()"></div>
        <div class="block-item-4" id="chart4" :class="[isActive4?'change':'changs']" @mouseleave="changeIt4()" @mouseenter="changeIt4()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-5" id="chart5" :class="[isActive5?'change':'changs']" @mouseleave="changeIt5()" @mouseenter="changeIt5()"></div>
        <div class="block-item-5" id="chart6" :class="[isActive6?'change':'changs']" @mouseleave="changeIt6()" @mouseenter="changeIt6()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-5" id="chart7" :class="[isActive7?'change':'changs']" @mouseleave="changeIt7()" @mouseenter="changeIt7()"></div>
        <div class="block-item-5" id="chart8" :class="[isActive8?'change':'changs']" @mouseleave="changeIt8()" @mouseenter="changeIt8()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-5" id="chart9" :class="[isActive9?'change':'changs']" @mouseleave="changeIt9()" @mouseenter="changeIt9()"></div>
        <div class="block-item-5" id="chart10" :class="[isActive10?'change':'changs']" @mouseleave="changeIt10()" @mouseenter="changeIt10()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-5" id="chart11" :class="[isActive11?'change':'changs']" @mouseleave="changeIt11()" @mouseenter="changeIt11()"></div>
        <div class="block-item-5" id="chart12" :class="[isActive12?'change':'changs']" @mouseleave="changeIt12()" @mouseenter="changeIt12()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-6">
          <!--<el-form>-->
          <el-tabs  v-model="activeName">
            <el-tab-pane label="报表" name="first" style="height: 400px;">
              <div style="float: left;">
                <el-button type="primary" icon="el-icon-download"
                >下载表格</el-button
                >
              </div>
              <div style="margin:10px;border:0;padding:0;padding-top: 60px;height: 350px">
                <el-table
                  :border="true"
                  :data="tableData2"
                  style="width: 100%"
                  :span-method="objectSpanMethod"
                  :cell-style="setCellStyle"
                >
                  <el-table-column fixed prop="date" label="商家" width="180">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="isShow"
                        :icon="iconUrl"
                        v-model="scope.row.standard"
                      >全平台</el-button
                      >
                    </template>
                  </el-table-column>

                  <el-table-column label="客单价  ">
                    <el-table-column prop="name" label="合计"> </el-table-column>
                    <el-table-column prop="name" label="占比"> </el-table-column>
                    <el-table-column prop="name" label="环比"> </el-table-column>
                    <el-table-column prop="name" label="同年比"> </el-table-column>
                  </el-table-column>
                  <el-table-column label="UV  ">
                    <el-table-column prop="name" label="合计"> </el-table-column>
                    <el-table-column prop="name" label="占比"> </el-table-column>
                    <el-table-column prop="name" label="环比"> </el-table-column>
                    <el-table-column prop="name" label="同年比"> </el-table-column>
                  </el-table-column>
                  <el-table-column label="新客数  ">
                    <el-table-column prop="name" label="合计"> </el-table-column>
                    <el-table-column prop="name" label="占比"> </el-table-column>
                    <el-table-column prop="name" label="环比"> </el-table-column>
                    <el-table-column prop="name" label="同年比"> </el-table-column>
                  </el-table-column>

                  <el-table-column label="成交客户数 ">
                    <el-table-column prop="date" label="平台名称">
                    </el-table-column>
                    <el-table-column prop="name" label="合计"> </el-table-column>
                    <el-table-column prop="name" label="占比"> </el-table-column>
                    <el-table-column prop="name" label="环比"> </el-table-column>
                    <el-table-column prop="name" label="同年比"> </el-table-column>
                  </el-table-column>
                  <el-table-column label="成交订单金额 ">
                    <el-table-column prop="date" label="平台名称">
                    </el-table-column>
                    <el-table-column prop="name" label="合计"> </el-table-column>
                    <el-table-column prop="name" label="占比"> </el-table-column>
                    <el-table-column prop="name" label="环比"> </el-table-column>
                    <el-table-column prop="name" label="同年比"> </el-table-column>
                  </el-table-column>

                  <el-table-column label="新客成交金额  ">
                    <el-table-column prop="name" label="合计"> </el-table-column>
                    <el-table-column prop="name" label="占比"> </el-table-column>
                    <el-table-column prop="name" label="环比"> </el-table-column>
                    <el-table-column prop="name" label="同年比"> </el-table-column>
                  </el-table-column>

                  <el-table-column label="新注册客户数  ">
                    <el-table-column prop="name" label="合计"> </el-table-column>
                    <el-table-column prop="name" label="占比"> </el-table-column>
                    <el-table-column prop="name" label="环比"> </el-table-column>
                    <el-table-column prop="name" label="同年比"> </el-table-column>
                  </el-table-column>

                  <el-table-column label="活跃会员数  ">
                    <el-table-column prop="name" label="合计"> </el-table-column>
                    <el-table-column prop="name" label="占比"> </el-table-column>
                    <el-table-column prop="name" label="环比"> </el-table-column>
                    <el-table-column prop="name" label="同年比"> </el-table-column>
                  </el-table-column>

                  <el-table-column label="复购率  ">
                    <el-table-column prop="name" label="合计"> </el-table-column>
                    <el-table-column prop="name" label="占比"> </el-table-column>
                    <el-table-column prop="name" label="环比"> </el-table-column>
                    <el-table-column prop="name" label="同年比"> </el-table-column>
                  </el-table-column>

                  <el-table-column label="沉默会员数  ">
                    <el-table-column prop="name" label="合计"> </el-table-column>
                    <el-table-column prop="name" label="占比"> </el-table-column>
                    <el-table-column prop="name" label="环比"> </el-table-column>
                    <el-table-column prop="name" label="同年比"> </el-table-column>
                  </el-table-column>

                  <el-table-column label="注册一周内未成交客户数 ">
                    <el-table-column prop="name" label="合计"> </el-table-column>
                    <el-table-column prop="name" label="占比"> </el-table-column>
                    <el-table-column prop="name" label="环比"> </el-table-column>
                    <el-table-column prop="name" label="同年比"> </el-table-column>
                  </el-table-column>

                </el-table>
              </div>
            </el-tab-pane>



            <el-tab-pane label="趋势图" name="second">
              <div style="float:left">
                <el-checkbox
                  v-model="allCheckedSource"
                  label="全渠道"
                  @change="isChangeChecked"
                >全渠道</el-checkbox
                >
              </div>
              <div style="float:left; padding-left: 20px;">
                <el-checkbox-group
                  v-model="checkedSource"
                  @change="handleCheckdSourceChange"
                >
                  <el-checkbox v-for="item in sourceOptions" :label="item.label" :key="item.value">
                  </el-checkbox>
                </el-checkbox-group>
              </div>

              <div style="padding-top: 40px;">
                <el-row>
                  <el-col :span="24">
                    <div class="grid-content bg-purple" style="height: 40px;">

                      <el-checkbox-group
                        v-model="checkedType"
                        style="float:left; padding-top: 10px;"
                        :max="2"
                        @change="handleCheckdSourceTypeChange"
                      >
                        <el-checkbox
                          v-for="item in type"
                          :label="item"
                          :key="item"
                        >{{ item }}</el-checkbox
                        >
                      </el-checkbox-group>


                      <div class="11111" style="float:left;padding-top: 10px;">
                        &nbsp&nbsp&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp&nbsp
                      </div>

                    </div>
                  </el-col>
                </el-row>
              </div>


              <div style="margin:10px;border:0;padding:0;margin-left:-65px;">
                <el-row>
                  <el-col :span="24">
                    <div
                      id="myCharts7"
                      class="grid-content bg-purple1"
                      :style="{ width: '1680px', height: '400px' }"
                    ></div>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>

          </el-tabs>
          <!--</el-form>-->
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  const typeOptions = ["成交客户数", "成交订单金额", "客单价", "UV", "新客数", "新客成交金额","活跃会员数","注册会员数","沉默会员数","注册一周内未成交客户数"];

  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        totalSize: 0,
        content: [],
        // 分页信息
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        activeName: "first",
        checkedType: [],
        type: typeOptions,

        allCheckedSource: true,
        checkedSource: [],
        sourceOptions: [
          { key: 0, label: "BBC" },
          { key: 1, label: "天猫" },
          { key: 2, label: "京东" }
        ],

        iconUrl: "el-icon-plus",
        tableData2: [
          {
            date: "合计",
            name: "2300",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
          },
          {
            date: "BBC",
            name: "2300",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
          },
          {
            date: "天猫",
            name: "0",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
          },
          {
            date: "京东",
            name: "0",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
          }
        ],
        tableData: [{
          date: '2016-05-03',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }, {
          date: '2016-05-02',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }, {
          date: '2016-05-04',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }, {
          date: '2016-05-01',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }, {
          date: '2016-05-08',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }, {
          date: '2019-12-25',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }, {
          date: '2016-05-07',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }],
        isActive: true,
        isActive2:true,
        isActive3: true,
        isActive4:true,

        isActive5: true,
        isActive6:true,
        isActive7:true,
        isActive8:true,

        isActive9:true,
        isActive10:true,
        isActive11:true,
        isActive12:true,
        size: "small",
        filters: {
          code: "",
          name: "",
          status: "",
          res: {
            "total": 1,
            "code": "0000",
            "rows": [{
              "code": "AH19092211543519777",
              "name": "拆单规则",
              "priority": 1,
              "status": "可用"
            }]
          }
        },
        mychartdata: ['BBC', '天猫', '京东'],
        mycharseriesdata: [{value: 335, name: 'BBC'}, {value: 335, name: '天猫'}, {value: 335, name: '京东'}]
      }
    },
    methods: {
      drawBar() {
        // 基于dom，初始化echarts实例
        let this_ =this;
        let myCharts7 = this_.$echarts.init(document.getElementById("myCharts7"));


        //经营树状图分析
        myCharts7.setOption({
          tooltip: {},
          xAxis: {
            type: "category",
            axisLine: { onZero: false },
            data: [
              "2019-12-20",
              "2019-12-21",
              "2019-12-22",
              "2019-12-23",
              "2019-12-24",
              "2019-12-25",
              "2019-12-26"
            ]
          },
          yAxis: {
            min: 0,
            max: 1,
            type: "value",
            axisLine: { onZero: false }
          },
          series: [
            {
              id: "a",
              type: "line",
              smooth: true,
              symbolSize: 20,
              data: [0, 0, 0, 0, 0, 0.16, 0.62]
            }
          ]
        });
      },

      setCellStyle: function(row, column, rowIndex, columnIndex) {
        return "padding:0;height:60px;";
      },
      isChangeChecked: function(data) {
        let this_ =this;
        console.log("icc绑定值变化-------start");
        console.log(data);
        this_.checkedSource = [];
        console.log("icc绑定值变化-------end");

      },

      handleCheckdSourceChange: function(data) {
        let this_ =this;
        console.log("hcsc绑定值变化-------start");
        console.log(data);
        this_.allCheckedSource =false;
        console.log("hcsc绑定值变化-------end");
      },

      handleCheckdSourceTypeChange: function(data) {
        console.log("hcstc绑定值变化-------start");
        console.log(data);
        console.log("hcstc绑定值变化-------end");
      },

      objectSpanMethod: function({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex === 0) {
            return {
              rowspan: 5,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      isShow: function() {
        if (this.iconUrl == "el-icon-plus") {
          this.iconUrl = "el-icon-minus";
        } else {
          this.iconUrl = "el-icon-plus";
        }
      },
      find:function () {
        this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "PV 1,625");
        this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "商详页UV 0");
        this.$mychart.mycookie('chart3', this.mychartdata, this.mycharseriesdata, "购物车UV 0");
        this.$mychart.mycookie('chart4', this.mychartdata, this.mycharseriesdata, "成交订单数 0");

        this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "二跳率 0");
        this.$mychart.mycookie('chart6', this.mychartdata, this.mycharseriesdata, "商详页转化率 0");
        this.$mychart.mycookie('chart7', this.mychartdata, this.mycharseriesdata, "新注册客户数 33");
        this.$mychart.mycookie('chart8', this.mychartdata, this.mycharseriesdata, "活跃会员数 91");

        this.$mychart.mycookie('chart9', this.mychartdata, this.mycharseriesdata, "复购率 28.57%");
        this.$mychart.mycookie('chart10', this.mychartdata, this.mycharseriesdata, "注册会员数 8,214,955");
        this.$mychart.mycookie('chart11', this.mychartdata, this.mycharseriesdata, "沉默会员数 0");
        this.$mychart.mycookie('chart12', this.mychartdata, this.mycharseriesdata, "注册一周内未成交客户数 60");

      },
      click1:function () {
        this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "PV 2,625");
        this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "商详页UV 2");
        this.$mychart.mycookie('chart3', this.mychartdata, this.mycharseriesdata, "购物车UV 2");
        this.$mychart.mycookie('chart4', this.mychartdata, this.mycharseriesdata, "成交订单数 2");

        this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "二跳率 2");
        this.$mychart.mycookie('chart6', this.mychartdata, this.mycharseriesdata, "商详页转化率 2");
        this.$mychart.mycookie('chart7', this.mychartdata, this.mycharseriesdata, "新注册客户数 33");
        this.$mychart.mycookie('chart8', this.mychartdata, this.mycharseriesdata, "活跃会员数 91");

        this.$mychart.mycookie('chart9', this.mychartdata, this.mycharseriesdata, "复购率 28.57%");
        this.$mychart.mycookie('chart10', this.mychartdata, this.mycharseriesdata, "注册会员数 8,214,955");
        this.$mychart.mycookie('chart11', this.mychartdata, this.mycharseriesdata, "沉默会员数 0");
        this.$mychart.mycookie('chart12', this.mychartdata, this.mycharseriesdata, "注册一周内未成交客户数 60");

      },
      click2:function () {
        this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "PV 3,625");
        this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "商详页UV 3");
        this.$mychart.mycookie('chart3', this.mychartdata, this.mycharseriesdata, "购物车UV 3");
        this.$mychart.mycookie('chart4', this.mychartdata, this.mycharseriesdata, "成交订单数 3");

        this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "二跳率 3");
        this.$mychart.mycookie('chart6', this.mychartdata, this.mycharseriesdata, "商详页转化率 3");
        this.$mychart.mycookie('chart7', this.mychartdata, this.mycharseriesdata, "新注册客户数 33");
        this.$mychart.mycookie('chart8', this.mychartdata, this.mycharseriesdata, "活跃会员数 91");

        this.$mychart.mycookie('chart9', this.mychartdata, this.mycharseriesdata, "复购率 28.57%");
        this.$mychart.mycookie('chart10', this.mychartdata, this.mycharseriesdata, "注册会员数 8,214,955");
        this.$mychart.mycookie('chart11', this.mychartdata, this.mycharseriesdata, "沉默会员数 0");
        this.$mychart.mycookie('chart12', this.mychartdata, this.mycharseriesdata, "注册一周内未成交客户数 60");

      },
      click3:function () {
        this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "PV 4,625");
        this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "商详页UV 4");
        this.$mychart.mycookie('chart3', this.mychartdata, this.mycharseriesdata, "购物车UV 4");
        this.$mychart.mycookie('chart4', this.mychartdata, this.mycharseriesdata, "成交订单数 4");

        this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "二跳率 4.5");
        this.$mychart.mycookie('chart6', this.mychartdata, this.mycharseriesdata, "商详页转化率 4.8");
        this.$mychart.mycookie('chart7', this.mychartdata, this.mycharseriesdata, "新注册客户数 33");
        this.$mychart.mycookie('chart8', this.mychartdata, this.mycharseriesdata, "活跃会员数 91");

        this.$mychart.mycookie('chart9', this.mychartdata, this.mycharseriesdata, "复购率 28.57%");
        this.$mychart.mycookie('chart10', this.mychartdata, this.mycharseriesdata, "注册会员数 8,214,955");
        this.$mychart.mycookie('chart11', this.mychartdata, this.mycharseriesdata, "沉默会员数 0");
        this.$mychart.mycookie('chart12', this.mychartdata, this.mycharseriesdata, "注册一周内未成交客户数 60");

      },
      // 换页刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        // this.init();
      },
      // 换页刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
        // this.init();
      },
      mouseEnter: function () {
        var dvObj = document.getElementById("div1");

        console.log("--------------------");
        console.log(dvObj);

        dvObj.style.border = "background-color:#000000;";
      },
      changeIt: function () {
        this.isActive = !this.isActive;
      },
      changeIt2: function () {
        this.isActive2 = !this.isActive2;
      },
      changeIt3: function () {
        this.isActive3 = !this.isActive3;
      },
      changeIt4: function () {
        this.isActive4 = !this.isActive4;
      },
      changeIt5: function () {
        this.isActive5 = !this.isActive5;
      },
      changeIt6: function () {
        this.isActive6 = !this.isActive6;
      },
      changeIt7: function () {
        this.isActive7 = !this.isActive7;
      },
      changeIt8: function () {
        this.isActive7 = !this.isActive7;
      },
      changeIt9: function () {
        this.isActive8 = !this.isActive8;
      },
      changeIt10: function () {
        this.isActive9 = !this.isActive9;
      },
      changeIt11: function () {
        this.isActive11 = !this.isActive11;
      },
      changeIt12: function () {
        this.isActive12 = !this.isActive12;
      }
    },
    mounted() {
      this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "成交客户数 4");
      this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "成交订单金额 13.03");
      this.$mychart.mycookie('chart3', this.mychartdata, this.mycharseriesdata, "客单价 1.86");
      this.$mychart.mycookie('chart4', this.mychartdata, this.mycharseriesdata, "UV 38");

      this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "新客数 1");
      this.$mychart.mycookie('chart6', this.mychartdata, this.mycharseriesdata, "新客成交金额 0.01");
      this.$mychart.mycookie('chart7', this.mychartdata, this.mycharseriesdata, "新注册客户数 33");
      this.$mychart.mycookie('chart8', this.mychartdata, this.mycharseriesdata, "活跃会员数 91");

      this.$mychart.mycookie('chart9', this.mychartdata, this.mycharseriesdata, "复购率 28.57%");
      this.$mychart.mycookie('chart10', this.mychartdata, this.mycharseriesdata, "注册会员数 8,214,955");
      this.$mychart.mycookie('chart11', this.mychartdata, this.mycharseriesdata, "沉默会员数 0");
      this.$mychart.mycookie('chart12', this.mychartdata, this.mycharseriesdata, "注册一周内未成交客户数 60");

      this.drawBar();
    }
  }
</script>

<style scoped>
  /*#chart1 {*/
  /*width: 300px;*/
  /*height: 300px;*/
  /*}*/
  .change {
    /*display:inline-block;*/
    /*text-align:left;*/
    /*background-color: #FFFFFF;*/
    /*margin: 10px;*/
  }

  .changs {
    /*display:inline-block;*/
    /*text-align:left;*/
    border: 1px solid #a6d9ff;
    /*background-color: #FFFFFF;*/
    /*margin: 10px;*/
  }



  .block-container {
    height: 1840px;

    /*width: 100%;*/
    background-color:#F0F3F4;
  }

  .block-title {
    text-align: center;
  }

  /* 父元素 */
  .block-content {
    font-size: 0;  /* 解决 inline-block 布局会出现多余间隙 */
    /*max-width: 1200px;*/
    margin: 0 auto;
  }

  .block-content .block-item-3,
  .block-content .block-item-4,
  .block-content .block-item-5,
  .block-content .block-item-6{
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    transition: all .4s ease;
    vertical-align: top; /* 设置顶部对齐 */
    font-size: 14px;
  }

  /* 3 列 */
  .block-content .block-item-3 {
    /*width: 45%;  !*  width: 32%;  *!*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 4 列 */
  .block-content .block-item-4 {
    /*width: 22%;   !* width: 23.5%; *!*/
    /*margin: 10px;  !*  margin-left: 2%;  *!*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 5 列 */
  .block-content .block-item-5 {
    /*width: 18%;*/
    /*margin: 10px;*/
    /*margin-left: 2.5%;*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 6 列 */
  .block-content .block-item-6 {
    /*margin: 10px;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 98%;
    margin-top: 20px;
    margin-left: 2%;
    margin-bottom: 30px;
    cursor: pointer;
  }

  /* 首列左边距设为0 */
  .block-content .block-item-3:first-child,
  .block-content .block-item-4:first-child,
  .block-content .block-item-5:first-child,
  .block-content .block-item-6:first-child {
    margin-left: 0;
  }

</style>
